<template>
	<view>
		<view class="edit-item">
			<view class="flex align-center">
				<view class="title must">姓名</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="name" placeholder="请输入" />
				</view>
			</view>
			
			<view class="flex align-center">
				<view class="title must">手机号码</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="number" v-model="mobile" placeholder="请输入" />
				</view>
			</view>
			
			<view class="flex align-center">
				<view class="title must">详细地址</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="address" placeholder="请输入" />
				</view>
			</view>
			
			<view class="flex align-center">
				<view class="title">号码归属地</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="place" placeholder="请输入" />
				</view>
			</view>

		</view>

		<view class="edit-btn" @click="sendType">提交</view>

	</view>
</template>

<script>
import { postBroadBand } from '../../api/user.js';
export default {
	data() {
		return {
			name: '', // 姓名
			mobile: '', //	手机号码
			address: '', //详细地址
			place: '', // 号码归属地
		}
	},
	
	methods: {
		// 提交信息
		sendType() {
			let { name, mobile, address, place} = this;
			if(name == '') return uni.showToast({title: '请输入姓名', icon: 'none'})
			if(mobile == '') return uni.showToast({title: '请输入手机号', icon: 'none'})
			if(address == '') return uni.showToast({title: '请输入详细地址', icon: 'none'})
			let data = { name, mobile, address, place}
			postBroadBand(data).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: "提交成功",
						success() {
							setTimeout(() => uni.navigateBack(), 1500)
						}
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style scoped>
	page {
		background: #f6f6f8;
	}

	/* 查看 */
	.look-item>view {
		width: 100%;
		padding: 30rpx;
		border-bottom: solid 1rpx #f2f2f2;
		background-color: #FFFFFF;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.look-item .title {
		font-size: 28rpx;
		color: #333;
	}

	.look-item .value {
		font-size: 26rpx;
		color: #686868;
	}

	.title {
		min-width: 180rpx;
		margin-right: 20rpx;
	}

	/* 编辑 */
	.edit-item>view {
		background-color: #FFFFFF;
		padding: 25rpx 30rpx;
		border-bottom: solid 1rpx #f4f4f4;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.edit-item .title {
		font-size: 24rpx;
		color: #545454;
	}

	.picker-veh {
		width: 110rpx;
	}

	.picker-veh image {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-font {
		font-size: 25rpx;
		color: #323232;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-item .must::before {
		content: "*";
		position: absolute;
		left: 12rpx;
		color: #ee0a24;

	}

	/* 编辑 保存 */
	.edit-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.w-max-100 {
		width: 100%;
	}

	.img-box {
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}

	.img-box image {
		width: 100%;
		height: 100%;
	}
	
	.img-box video {
		width: 100%;
		height: 100%;
	}

	.clzp-box>view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}

/* 	.clzp-box>view :nth-child(2n+n) {
		margin-right: 0 !important;
	} */

	.head_url {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	
	.img-box .clear-img {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 99;
	}
</style>
